<template>
  <div class="todo-app">
    <div class="todo-header">
      <h2>📝 智能待办列表</h2>
      <p class="subtitle">响应式数据 + 计算属性 + 侦听器综合实战</p>
    </div>
    
    <div class="todo-body">
      <div class="input-section">
        <div class="add-todo-form">
          <div class="form-group">
            <input
              v-model="newTodo.text"
              type="text"
              placeholder="输入新的待办事项..."
              class="todo-input"
              @keyup.enter="addTodo"
              :disabled="isMaxTodos"
            >
            <select
              v-model="newTodo.priority"
              class="priority-select"
              :disabled="isMaxTodos"
            >
              <option value="low">🟢 低优先级</option>
              <option value="medium">🟡 中优先级</option>
              <option value="high">🔴 高优先级</option>
            </select>
            <button
              @click="addTodo"
              :disabled="!canAddTodo || isMaxTodos"
              class="add-btn"
            >
              {{ isMaxTodos ? '数量已达上限' : '➕ 添加' }}
            </button>
          </div>
          <div class="input-stats">
            <span class="stat-item">
              <span class="stat-icon">📊</span>
              当前数量: {{ todos.length }}/{{ maxTodos }}
            </span>
            <span class="stat-item">
              <span class="stat-icon">✏️</span>
              输入字数: {{ newTodo.text.length }}/{{ maxTextLength }}
            </span>
          </div>
        </div>
      </div>
      
      <div class="stats-section">
        <div class="stats-grid">
          <div class="stat-card total">
            <div class="stat-icon">📋</div>
            <div class="stat-number">{{ totalTodos }}</div>
            <div class="stat-label">总任务数</div>
          </div>
          <div class="stat-card completed">
            <div class="stat-icon">✅</div>
            <div class="stat-number">{{ completedTodos }}</div>
            <div class="stat-label">已完成</div>
          </div>
          <div class="stat-card pending">
            <div class="stat-icon">⏳</div>
            <div class="stat-number">{{ pendingTodos }}</div>
            <div class="stat-label">待完成</div>
          </div>
          <div class="stat-card progress">
            <div class="stat-icon">📈</div>
            <div class="stat-number">{{ completionRate }}%</div>
            <div class="stat-label">完成率</div>
          </div>
        </div>
        
        <div class="progress-bar">
          <div class="progress-fill" :style="{ width: completionRate + '%' }"></div>
          <div class="progress-text">{{ completionRate }}% 完成</div>
        </div>
      </div>
      
      <div class="filter-section">
        <div class="filter-tabs">
          <button
            v-for="tab in filterTabs"
            :key="tab.value"
            @click="currentFilter = tab.value"
            :class="['filter-tab', { active: currentFilter === tab.value }]"
          >
            <span class="tab-icon">{{ tab.icon }}</span>
            <span>{{ tab.label }}</span>
            <span class="tab-count">{{ getFilterCount(tab.value) }}</span>
          </button>
        </div>
        
        <div class="sort-controls">
          <select v-model="sortBy" class="sort-select">
            <option value="created">📅 创建时间</option>
            <option value="priority">🔥 优先级</option>
            <option value="text">📝 内容排序</option>
          </select>
          <button @click="sortOrder = sortOrder === 'asc' ? 'desc' : 'asc'" class="sort-btn">
            {{ sortOrder === 'asc' ? '⬆️ 升序' : '⬇️ 降序' }}
          </button>
        </div>
      </div>
      
      <div class="todos-section">
        <div class="todos-header">
          <h3>📋 任务列表 ({{ filteredTodos.length }})</h3>
          <div class="batch-actions">
            <button @click="toggleAll" class="batch-btn">
              {{ allCompleted ? '↩️ 取消全选' : '✅ 全选' }}
            </button>
            <button @click="clearCompleted" class="batch-btn" :disabled="completedTodos === 0">
              🗑️ 清除已完成
            </button>
          </div>
        </div>
        
        <div class="todos-list">
          <div
            v-for="todo in filteredTodos"
            :key="todo.id"
            class="todo-item"
            :class="{ 
              completed: todo.completed,
              'priority-high': todo.priority === 'high',
              'priority-medium': todo.priority === 'medium',
              'priority-low': todo.priority === 'low'
            }"
          >
            <div class="todo-main">
              <input
                type="checkbox"
                v-model="todo.completed"
                class="todo-checkbox"
              >
              <div class="todo-content">
                <div class="todo-text" :class="{ completed: todo.completed }">
                  {{ todo.text }}
                </div>
                <div class="todo-meta">
                  <span class="priority-badge" :class="todo.priority">
                    {{ getPriorityText(todo.priority) }}
                  </span>
                  <span class="todo-date">
                    📅 {{ formatDate(todo.createdAt) }}
                  </span>
                </div>
              </div>
            </div>
            <div class="todo-actions">
              <button @click="editTodo(todo)" class="edit-btn">✏️</button>
              <button @click="deleteTodo(todo.id)" class="delete-btn">🗑️</button>
            </div>
          </div>
          
          <div v-if="filteredTodos.length === 0" class="empty-todos">
            <div class="empty-icon">📭</div>
            <div class="empty-text">
              {{ currentFilter === 'all' ? '暂无任务' : 
                 currentFilter === 'completed' ? '暂无已完成任务' : '暂无待完成任务' }}
            </div>
          </div>
        </div>
      </div>
      
      <div class="priority-analysis">
        <h4>🔥 优先级分析</h4>
        <div class="priority-stats">
          <div class="priority-item high">
            <div class="priority-label">🔴 高优先级</div>
            <div class="priority-count">{{ priorityStats.high }}</div>
            <div class="priority-bar">
              <div class="priority-fill" :style="{ width: getPriorityPercentage('high') + '%' }"></div>
            </div>
          </div>
          <div class="priority-item medium">
            <div class="priority-label">🟡 中优先级</div>
            <div class="priority-count">{{ priorityStats.medium }}</div>
            <div class="priority-bar">
              <div class="priority-fill" :style="{ width: getPriorityPercentage('medium') + '%' }"></div>
            </div>
          </div>
          <div class="priority-item low">
            <div class="priority-label">🟢 低优先级</div>
            <div class="priority-count">{{ priorityStats.low }}</div>
            <div class="priority-bar">
              <div class="priority-fill" :style="{ width: getPriorityPercentage('low') + '%' }"></div>
            </div>
          </div>
        </div>
      </div>
      
      <div class="activity-log">
        <h4>📊 活动日志</h4>
        <div class="log-list">
          <div
            v-for="(log, index) in activityLog"
            :key="index"
            class="log-item"
          >
            <div class="log-time">{{ log.time }}</div>
            <div class="log-action">{{ log.action }}</div>
          </div>
          <div v-if="activityLog.length === 0" class="empty-log">
            暂无活动记录
          </div>
        </div>
      </div>
    </div>
    
    <!-- 编辑模态框 -->
    <div v-if="editingTodo" class="modal-overlay" @click="cancelEdit">
      <div class="modal-content" @click.stop>
        <h3>✏️ 编辑任务</h3>
        <input
          v-model="editingTodo.text"
          type="text"
          class="edit-input"
          @keyup.enter="saveEdit"
        >
        <select v-model="editingTodo.priority" class="edit-priority-select">
          <option value="low">🟢 低优先级</option>
          <option value="medium">🟡 中优先级</option>
          <option value="high">🔴 高优先级</option>
        </select>
        <div class="modal-actions">
          <button @click="saveEdit" class="save-btn">💾 保存</button>
          <button @click="cancelEdit" class="cancel-btn">❌ 取消</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, watch } from 'vue'

// 待办事项接口
interface Todo {
  id: number
  text: string
  completed: boolean
  priority: 'low' | 'medium' | 'high'
  createdAt: Date
}

// 活动日志接口
interface ActivityLog {
  time: string
  action: string
}

// 响应式数据
const todos = ref<Todo[]>([
  { id: 1, text: '学习 Vue3 组合式 API', completed: true, priority: 'high', createdAt: new Date('2024-01-01') },
  { id: 2, text: '练习 TypeScript 类型推断', completed: false, priority: 'medium', createdAt: new Date('2024-01-02') },
  { id: 3, text: '完成响应式基础教程', completed: false, priority: 'high', createdAt: new Date('2024-01-03') },
  { id: 4, text: '制作待办列表演示项目', completed: false, priority: 'low', createdAt: new Date('2024-01-04') }
])

const newTodo = ref({
  text: '',
  priority: 'medium' as 'low' | 'medium' | 'high'
})

const currentFilter = ref<'all' | 'completed' | 'pending'>('all')
const sortBy = ref<'created' | 'priority' | 'text'>('created')
const sortOrder = ref<'asc' | 'desc'>('desc')
const editingTodo = ref<Todo | null>(null)
const activityLog = ref<ActivityLog[]>([])

// 常量
const maxTodos = 20
const maxTextLength = 100

// 过滤标签
const filterTabs = [
  { value: 'all', label: '全部', icon: '📋' },
  { value: 'pending', label: '待完成', icon: '⏳' },
  { value: 'completed', label: '已完成', icon: '✅' }
]

// 计算属性 - 基础统计
const totalTodos = computed(() => todos.value.length)
const completedTodos = computed(() => todos.value.filter(todo => todo.completed).length)
const pendingTodos = computed(() => todos.value.filter(todo => !todo.completed).length)
const completionRate = computed(() => {
  return totalTodos.value === 0 ? 0 : Math.round((completedTodos.value / totalTodos.value) * 100)
})

// 计算属性 - 输入验证
const canAddTodo = computed(() => {
  return newTodo.value.text.trim().length > 0 && newTodo.value.text.length <= maxTextLength
})

const isMaxTodos = computed(() => {
  return todos.value.length >= maxTodos
})

// 计算属性 - 优先级统计
const priorityStats = computed(() => {
  return {
    high: todos.value.filter(todo => todo.priority === 'high').length,
    medium: todos.value.filter(todo => todo.priority === 'medium').length,
    low: todos.value.filter(todo => todo.priority === 'low').length
  }
})

// 计算属性 - 过滤和排序后的待办事项
const filteredTodos = computed(() => {
  let filtered = todos.value
  
  // 过滤
  if (currentFilter.value === 'completed') {
    filtered = filtered.filter(todo => todo.completed)
  } else if (currentFilter.value === 'pending') {
    filtered = filtered.filter(todo => !todo.completed)
  }
  
  // 排序
  filtered.sort((a, b) => {
    let compareValue = 0
    
    switch (sortBy.value) {
      case 'priority':
        const priorityOrder = { high: 3, medium: 2, low: 1 }
        compareValue = priorityOrder[a.priority] - priorityOrder[b.priority]
        break
      case 'text':
        compareValue = a.text.localeCompare(b.text)
        break
      case 'created':
      default:
        compareValue = a.createdAt.getTime() - b.createdAt.getTime()
        break
    }
    
    return sortOrder.value === 'asc' ? compareValue : -compareValue
  })
  
  return filtered
})

// 计算属性 - 全选状态
const allCompleted = computed(() => {
  return todos.value.length > 0 && todos.value.every(todo => todo.completed)
})

// 方法 - 添加待办事项
const addTodo = () => {
  if (!canAddTodo.value || isMaxTodos.value) return
  
  const todo: Todo = {
    id: Date.now(),
    text: newTodo.value.text.trim(),
    completed: false,
    priority: newTodo.value.priority,
    createdAt: new Date()
  }
  
  todos.value.push(todo)
  addActivityLog(`添加了任务: "${todo.text}"`)
  
  // 重置输入
  newTodo.value.text = ''
  newTodo.value.priority = 'medium'
}

// 方法 - 删除待办事项
const deleteTodo = (id: number) => {
  const todo = todos.value.find(t => t.id === id)
  if (todo) {
    todos.value = todos.value.filter(t => t.id !== id)
    addActivityLog(`删除了任务: "${todo.text}"`)
  }
}

// 方法 - 编辑待办事项
const editTodo = (todo: Todo) => {
  editingTodo.value = { ...todo }
}

const saveEdit = () => {
  if (!editingTodo.value) return
  
  const index = todos.value.findIndex(t => t.id === editingTodo.value!.id)
  if (index !== -1) {
    const oldTodo = { ...todos.value[index] }
    todos.value[index] = { ...editingTodo.value }
    addActivityLog(`编辑了任务: "${oldTodo.text}" → "${editingTodo.value.text}"`)
  }
  
  editingTodo.value = null
}

const cancelEdit = () => {
  editingTodo.value = null
}

// 方法 - 批量操作
const toggleAll = () => {
  const targetState = !allCompleted.value
  todos.value.forEach(todo => {
    todo.completed = targetState
  })
  addActivityLog(targetState ? '标记所有任务为完成' : '取消所有完成标记')
}

const clearCompleted = () => {
  const completedCount = completedTodos.value
  todos.value = todos.value.filter(todo => !todo.completed)
  addActivityLog(`清除了 ${completedCount} 个已完成任务`)
}

// 方法 - 优先级相关
const getPriorityText = (priority: string) => {
  const map = { high: '高', medium: '中', low: '低' }
  return map[priority as keyof typeof map]
}

const getPriorityPercentage = (priority: 'high' | 'medium' | 'low') => {
  return totalTodos.value === 0 ? 0 : Math.round((priorityStats.value[priority] / totalTodos.value) * 100)
}

const getFilterCount = (filter: string) => {
  switch (filter) {
    case 'completed': return completedTodos.value
    case 'pending': return pendingTodos.value
    default: return totalTodos.value
  }
}

// 方法 - 格式化日期
const formatDate = (date: Date) => {
  return date.toLocaleDateString('zh-CN')
}

// 方法 - 活动日志
const addActivityLog = (action: string) => {
  const now = new Date()
  const timeString = now.toLocaleTimeString('zh-CN', { 
    hour: '2-digit', 
    minute: '2-digit', 
    second: '2-digit' 
  })
  
  activityLog.value.unshift({
    time: timeString,
    action
  })
  
  // 限制日志数量
  if (activityLog.value.length > 20) {
    activityLog.value = activityLog.value.slice(0, 20)
  }
}

// 侦听器 - 监听待办事项变化
watch(todos, (newTodos, oldTodos) => {
  console.log('📋 待办列表更新:', {
    总数: newTodos.length,
    已完成: newTodos.filter(t => t.completed).length,
    待完成: newTodos.filter(t => !t.completed).length
  })
}, { deep: true })

// 侦听器 - 监听完成状态变化
watch(completedTodos, (newCount, oldCount) => {
  if (newCount > oldCount) {
    console.log(`🎉 完成了 ${newCount - oldCount} 个任务！`)
  }
})

// 初始化活动日志
addActivityLog('待办列表应用启动')
</script>

<style scoped>
.todo-app {
  max-width: 1000px;
  margin: 30px auto;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 20px;
  padding: 30px;
  color: white;
  font-family: 'Arial', sans-serif;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}

.todo-header {
  text-align: center;
  margin-bottom: 30px;
}

.todo-header h2 {
  font-size: 28px;
  margin-bottom: 10px;
  background: linear-gradient(45deg, #fff, #42b883);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.subtitle {
  opacity: 0.8;
  font-size: 16px;
}

.todo-body {
  display: flex;
  flex-direction: column;
  gap: 25px;
}

.input-section {
  background: rgba(255, 255, 255, 0.1);
  padding: 25px;
  border-radius: 15px;
}

.add-todo-form {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.form-group {
  display: flex;
  gap: 10px;
  align-items: center;
}

.todo-input {
  flex: 1;
  padding: 12px;
  border: none;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.9);
  color: #333;
  font-size: 14px;
}

.todo-input:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.priority-select {
  padding: 12px;
  border: none;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.9);
  color: #333;
  font-size: 14px;
  cursor: pointer;
}

.priority-select:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.add-btn {
  padding: 12px 20px;
  border: none;
  border-radius: 8px;
  background: #42b883;
  color: white;
  cursor: pointer;
  font-size: 14px;
  transition: all 0.3s ease;
}

.add-btn:hover:not(:disabled) {
  background: #369870;
  transform: translateY(-2px);
}

.add-btn:disabled {
  background: rgba(255, 255, 255, 0.3);
  cursor: not-allowed;
  opacity: 0.7;
}

.input-stats {
  display: flex;
  gap: 20px;
  font-size: 12px;
  opacity: 0.8;
}

.stat-item {
  display: flex;
  align-items: center;
  gap: 5px;
}

.stat-icon {
  font-size: 14px;
}

.stats-section {
  background: rgba(255, 255, 255, 0.1);
  padding: 25px;
  border-radius: 15px;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 15px;
  margin-bottom: 20px;
}

.stat-card {
  background: rgba(255, 255, 255, 0.05);
  padding: 20px;
  border-radius: 12px;
  text-align: center;
  transition: all 0.3s ease;
}

.stat-card:hover {
  transform: translateY(-2px);
}

.stat-card.total { border-left: 4px solid #007bff; }
.stat-card.completed { border-left: 4px solid #28a745; }
.stat-card.pending { border-left: 4px solid #ffc107; }
.stat-card.progress { border-left: 4px solid #17a2b8; }

.stat-icon {
  font-size: 24px;
  margin-bottom: 10px;
}

.stat-number {
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 5px;
}

.stat-label {
  font-size: 12px;
  opacity: 0.8;
}

.progress-bar {
  position: relative;
  height: 20px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #42b883, #28a745);
  border-radius: 10px;
  transition: width 0.5s ease;
}

.progress-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 12px;
  font-weight: bold;
  color: white;
}

.filter-section {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: rgba(255, 255, 255, 0.1);
  padding: 20px;
  border-radius: 12px;
}

.filter-tabs {
  display: flex;
  gap: 10px;
}

.filter-tab {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 15px;
  border: none;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.1);
  color: white;
  cursor: pointer;
  font-size: 12px;
  transition: all 0.3s ease;
}

.filter-tab.active {
  background: #42b883;
}

.filter-tab:hover:not(.active) {
  background: rgba(255, 255, 255, 0.2);
}

.tab-icon {
  font-size: 14px;
}

.tab-count {
  background: rgba(255, 255, 255, 0.3);
  padding: 2px 6px;
  border-radius: 10px;
  font-size: 10px;
  font-weight: bold;
}

.sort-controls {
  display: flex;
  gap: 10px;
  align-items: center;
}

.sort-select {
  padding: 8px 12px;
  border: none;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.9);
  color: #333;
  font-size: 12px;
}

.sort-btn {
  padding: 8px 12px;
  border: none;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.2);
  color: white;
  cursor: pointer;
  font-size: 12px;
  transition: all 0.3s ease;
}

.sort-btn:hover {
  background: rgba(255, 255, 255, 0.3);
}

.todos-section {
  background: rgba(255, 255, 255, 0.1);
  padding: 25px;
  border-radius: 15px;
}

.todos-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.todos-header h3 {
  color: #42b883;
  font-size: 18px;
}

.batch-actions {
  display: flex;
  gap: 10px;
}

.batch-btn {
  padding: 8px 12px;
  border: none;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.2);
  color: white;
  cursor: pointer;
  font-size: 12px;
  transition: all 0.3s ease;
}

.batch-btn:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.3);
}

.batch-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.todos-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.todo-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 10px;
  border-left: 4px solid transparent;
  transition: all 0.3s ease;
}

.todo-item:hover {
  transform: translateX(5px);
  background: rgba(255, 255, 255, 0.1);
}

.todo-item.priority-high {
  border-left-color: #dc3545;
}

.todo-item.priority-medium {
  border-left-color: #ffc107;
}

.todo-item.priority-low {
  border-left-color: #28a745;
}

.todo-item.completed {
  opacity: 0.7;
}

.todo-main {
  display: flex;
  align-items: center;
  gap: 15px;
  flex: 1;
}

.todo-checkbox {
  width: 18px;
  height: 18px;
  cursor: pointer;
}

.todo-content {
  flex: 1;
}

.todo-text {
  font-size: 14px;
  margin-bottom: 5px;
  word-break: break-word;
}

.todo-text.completed {
  text-decoration: line-through;
  opacity: 0.6;
}

.todo-meta {
  display: flex;
  gap: 10px;
  align-items: center;
}

.priority-badge {
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 10px;
  font-weight: bold;
}

.priority-badge.high {
  background: rgba(220, 53, 69, 0.3);
  color: #dc3545;
}

.priority-badge.medium {
  background: rgba(255, 193, 7, 0.3);
  color: #ffc107;
}

.priority-badge.low {
  background: rgba(40, 167, 69, 0.3);
  color: #28a745;
}

.todo-date {
  font-size: 10px;
  opacity: 0.7;
}

.todo-actions {
  display: flex;
  gap: 5px;
}

.edit-btn, .delete-btn {
  padding: 6px 8px;
  border: none;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.2);
  color: white;
  cursor: pointer;
  font-size: 12px;
  transition: all 0.3s ease;
}

.edit-btn:hover {
  background: rgba(255, 193, 7, 0.5);
}

.delete-btn:hover {
  background: rgba(220, 53, 69, 0.5);
}

.empty-todos {
  text-align: center;
  padding: 40px;
  opacity: 0.6;
}

.empty-icon {
  font-size: 48px;
  margin-bottom: 10px;
}

.empty-text {
  font-size: 14px;
}

.priority-analysis, .activity-log {
  background: rgba(255, 255, 255, 0.1);
  padding: 20px;
  border-radius: 12px;
}

.priority-analysis h4, .activity-log h4 {
  margin-bottom: 15px;
  color: #42b883;
  font-size: 16px;
}

.priority-stats {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.priority-item {
  display: flex;
  align-items: center;
  gap: 10px;
}

.priority-label {
  min-width: 100px;
  font-size: 12px;
  font-weight: bold;
}

.priority-count {
  min-width: 30px;
  text-align: center;
  font-weight: bold;
}

.priority-bar {
  flex: 1;
  height: 8px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 4px;
  overflow: hidden;
}

.priority-fill {
  height: 100%;
  border-radius: 4px;
  transition: width 0.5s ease;
}

.priority-item.high .priority-fill {
  background: #dc3545;
}

.priority-item.medium .priority-fill {
  background: #ffc107;
}

.priority-item.low .priority-fill {
  background: #28a745;
}

.log-list {
  display: flex;
  flex-direction: column;
  gap: 5px;
  max-height: 150px;
  overflow-y: auto;
}

.log-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 12px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 6px;
  font-size: 11px;
}

.log-time {
  opacity: 0.7;
}

.log-action {
  flex: 1;
  margin-left: 10px;
}

.empty-log {
  text-align: center;
  padding: 20px;
  opacity: 0.6;
  font-size: 12px;
}

.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.modal-content {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  padding: 30px;
  border-radius: 15px;
  color: white;
  width: 90%;
  max-width: 400px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}

.modal-content h3 {
  margin-bottom: 20px;
  color: #42b883;
  text-align: center;
}

.edit-input {
  width: 100%;
  padding: 12px;
  border: none;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.9);
  color: #333;
  font-size: 14px;
  margin-bottom: 15px;
}

.edit-priority-select {
  width: 100%;
  padding: 12px;
  border: none;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.9);
  color: #333;
  font-size: 14px;
  margin-bottom: 20px;
}

.modal-actions {
  display: flex;
  gap: 10px;
  justify-content: center;
}

.save-btn, .cancel-btn {
  padding: 10px 20px;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-size: 14px;
  transition: all 0.3s ease;
}

.save-btn {
  background: #42b883;
  color: white;
}

.save-btn:hover {
  background: #369870;
}

.cancel-btn {
  background: rgba(255, 255, 255, 0.2);
  color: white;
}

.cancel-btn:hover {
  background: rgba(255, 255, 255, 0.3);
}

@media (max-width: 768px) {
  .todo-app {
    padding: 20px;
    margin: 20px;
  }
  
  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .filter-section {
    flex-direction: column;
    gap: 15px;
  }
  
  .todos-header {
    flex-direction: column;
    gap: 15px;
    align-items: stretch;
  }
  
  .form-group {
    flex-direction: column;
  }
  
  .priority-analysis, .activity-log {
    display: none;
  }
}
</style>